<template>
	<a-layout-sider collapsible width="200px" class="layoutSilder" :class="{light:theme=='light'}" v-model="collapsed">
		<s-menu :collapsed="collapsed" :menu="menus" :theme="theme" @select="onSelect" :mode="mode" style="padding: 0; text-align: left; border-right: 0;"></s-menu>
	</a-layout-sider>
</template>

<script>
	import ALayoutSider from 'ant-design-vue/es/layout/Sider';
	import SMenu from './index';
	/* import {
		updateTheme
	} from '@/components/SettingDrawer/settingConfig' */
	import {
		fileUrl
	} from '@/utils/base'
	export default {
		name: 'SiderMenu',
		components: {
			ALayoutSider,
			SMenu
		},
		props: {
			mode: {
				type: String,
				required: false,
				default: 'inline'
			},
			theme: {
				type: String,
				required: false,
				default: 'dark'
			},
			collapsible: {
				type: Boolean,
				required: false,
				default: false
			},
			// 		collapsed: {
			// 			type: Boolean,
			// 			required: false,
			// 			default: false
			// 		},
			menus: {
				type: Array,
				required: true
			}
		},
		data() {
			return {
				collapsed: false,
				userInfo: {},
				// theme: localStorage.getItem('navTheme') || 'dark',
				fileUrl
			}
		},
		created() {
			this.getUserInfo();
		},
		mounted() {
			const $me = this;
		},
		computed: {
			// 		isMobile() {
			// 			return this.$store.state.app.device !== 'desktop';
			// 		}
		},
		methods: {
			onSelect(obj) {
				this.$emit('menuSelect', obj);
			},
			getUserInfo() {
				try {
					if (JSON.parse(localStorage.getItem('userInfo'))) {
						this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
			sendMessage() {
				// 向父vue页面发送信息
				window.parent.postMessage({
					cmd: 'exitApp',
					params: {}
				}, '*');
			},
			setuploadInfo() {
				window.parent.postMessage({
					cmd: 'uploadInfo',
					params: {}
				}, '*');
			}
		}
	};
</script>
<style lang="less" scoped="scoped">
	.logo h1 {
		color: #fff;
	}

	

	/deep/ .iconfont {
		font-size: 14px;
		margin-right: 5px;
	}

	/deep/ .ant-menu-inline-collapsed>.ant-menu-item .iconfont+span,
	/deep/ .ant-menu-inline-collapsed>.ant-menu-item-group>.ant-menu-item-group-list>.ant-menu-item .iconfont+span,
	/deep/ .ant-menu-inline-collapsed>.ant-menu-item-group>.ant-menu-item-group-list>.ant-menu-submenu>.ant-menu-submenu-title .iconfont+span,
	/deep/ .ant-menu-inline-collapsed>.ant-menu-submenu>.ant-menu-submenu-title .iconfont+span {
		display: inline-block;
		max-width: 0;
		opacity: 0;
	}

	/* .ant-layout-sider-trigger{
		bottom:25px;
		} */
	.layoutSilder {
		overflow: auto;
		height: 100%;
	}

	.light.layoutSilder {
		background: #e8ebef;
	}

	.light.layoutSilder .userinfo {
		color: #333;

		a {
			color: #333;
		}
	}

	.light /deep/ .ant-menu {
		background: #e8ebef;
	}
</style>
